<template>
    <div>
        <!-- 评论区 -->
        <div class="video-comment">
            <div class="header">
                <div class="notice">
                    <div class="bar">
                        <div class="bg"></div>
                        <div class="icon">
                            <img class="img" src="../assets/MyMusic/notice.svg" alt="">
                        </div>
                        <div class="title">【独家】前排围观珠海航展飞行表演>></div>
                        <div class="close">
                            <img class="img" src="../assets/MyMusic/close.svg" alt="">
                        </div>
                    </div>
                </div>
                <div class="navbar">
                    <div class="title">
                        <!-- <h2 class="text">评论</h2>
                        <div class="count">
                            {{ comments ? comments.length : 0 }}
                        </div> -->
                    </div>
                    <div class="sort-actions">
                        <el-radio-group v-model="sortCommentAction" size="large" fill="white" text-color="#18191C">
                            <el-radio-button class="radio" label="最热" value="New York" />
                            <el-radio-button class="radio" label="最新" value="Washington" />
                        </el-radio-group>
                    </div>
                </div>
                <div class="comment-box">
                    <div class="user-avatar">
                        <div class="avatar">
                            <el-avatar :size="48" :src="userAvatar" @error="errorHandler"></el-avatar>
                        </div>
                    </div>
                    <div class="comment-area">
                        <el-mention ref="textareaRef" v-model="inputValue" type="textarea" :options="options"
                            resize="none" class="area" placeholder="评论千万条，等你发一条" />
                        <div class="footer">
                            <el-popover ref="popover" placement="bottom" :width="360" trigger="click">
                                <template #reference>
                                    <button class="item">
                                        <img class="icon" src="../assets/MyMusic/emoji.svg"
                                            alt="">
                                    </button>
                                </template>
                                <template #default>
                                    <div class="emoji-body">
                                        <div class="emoji-content">
                                            <div @click="emojiClick(emoji.title)" class="emoji-img"
                                                v-for="emoji in emojiList" :key="emoji.title">
                                                <img class="img" :src="emoji.link" :alt="emoji.title">
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-popover>
                            <button class="item" @click="mention(1)">
                                <img class="icon" src="../assets/MyMusic/mention.svg" alt="">
                            </button>
                            <!-- <button class="item">
                                <img class="icon" src="../assets/videoMain/centerMain/commentHeader/image.svg" alt="">
                            </button> -->
                            <div class="pub">
                                <button @click="postComment(1)" class="btn">评论</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 评论的回复框 -->
                <div v-if="isReplying" class="reply-container" :style="{ width: '856px' }">
                    <div style="display: flex; justify-content: flex-end;">
                        <el-icon @click="isReplying = false">
                            <CloseBold />
                        </el-icon>
                    </div>
                    <div class="comment-box">
                        <div class="user-avatar">
                            <div class="avatar">
                                <el-avatar :size="48" :src="userAvatar" @error="errorHandler"></el-avatar>
                            </div>
                        </div>
                        <div class="comment-area">
                            <el-mention ref="commentTextarea" v-model="commentValue" type="textarea" :options="options"
                                resize="none" class="area" :placeholder="`回复@${replyTarget}`" />
                            <div class="footer">
                                <el-popover ref="popover" placement="bottom" :width="360" trigger="click">
                                    <template #reference>
                                        <button class="item">
                                            <img class="icon"
                                                src="../assets/videoMain/centerMain/commentHeader/emoji.svg" alt="">
                                        </button>
                                    </template>
                                    <template #default>
                                        <div class="emoji-body">
                                            <div class="emoji-content">
                                                <div @click="commentEmojiClick(emoji.title, index)" class="emoji-img"
                                                    v-for="emoji in emojiList" :key="emoji.title">
                                                    <img class="img" :src="emoji.link" :alt="emoji.title">
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-popover>
                                <button class="item" @click="mention(2)">
                                    <img class="icon" src="../assets/videoMain/centerMain/commentHeader/mention.svg"
                                        alt="" />
                                </button>
                                <!-- <button class="item">
                                    <img class="icon" src="../assets/videoMain/centerMain/commentHeader/image.svg"
                                        alt="" />
                                </button> -->
                                <div class="pub">
                                    <button @click="postComment(2)" class="btn">发布</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="content-item" v-for="(item, index) in comments" :key="item.commentId">
                    <!-- 评论 -->
                    <div class="wrap">
                        <div class="body">
                            <router-link class="user-avatar" to="/">
                                <el-avatar :size="48" :src="item.avatar" @error="errorHandler"></el-avatar>
                            </router-link>
                            <div class="main">
                                <div class="header">
                                    <div class="wrap">
                                        <div class="info">
                                            <div class="name">
                                                <router-link class="text" to="/">
                                                    {{ item.nickname }}
                                                </router-link>
                                            </div>
                                            <div class="level">
                                                <img class="icon"
                                                    :src="`/src/assets/videoMain/centerMain/commentMain/ic_user level_${item.level}.svg`"
                                                    alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="content">
                                    <div class="wrap">
                                        <p class="contents">
                                            <span v-html="item.content"></span>
                                        </p>
                                    </div>
                                </div>
                                <div class="footer">
                                    <div class="wrap">
                                        <div class="pubdate">{{ item.createTime }}</div>
                                        <div class="item">
                                            <button @click="commentLike(item.commentId, 1)" class="btn">
                                                <!-- 显示未点赞图标 -->
                                                <img v-if="!hasLiked(item.likeIds)" class="icon"
                                                    src="../assets/videoMain/centerMain/commentMain/like.svg" alt="">

                                                <!-- 显示已点赞图标 -->
                                                <img v-else class="icon"
                                                    src="../assets/videoMain/centerMain/commentMain/likeed.svg" alt="">
                                                <span class="count">{{ item.likeCount }}</span>
                                            </button>
                                        </div>
                                        <div class="item">
                                            <button @click="commentLike(item.commentId, 2)" class="btn">
                                                <!-- 显示未点赞图标 -->
                                                <img v-if="!hasLiked(item.dislikeIds)" class="icon"
                                                    src="../assets/videoMain/centerMain/commentMain/dislike.svg" alt="">

                                                <!-- 显示已点赞图标 -->
                                                <img v-else class="icon"
                                                    src="../assets/videoMain/centerMain/commentMain/dislikeed.svg"
                                                    alt="">
                                                <span class="count">{{ item.dislikeCount }}</span>
                                            </button>
                                        </div>
                                        <div class="item">
                                            <button class="btn"
                                                @click="replyToComment(item.commentId, item.nickname)">回复</button>
                                        </div>
                                        <div class="more">
                                            <!-- 待实现 -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 回复 -->
                    <div class="replies">
                        <div class="wrap" :class="isExpanded ? 'expanded' : ''">
                            <div class="expander">
                                <div v-for="reply in (item.replies || [])" :key="reply.replyId"
                                    class="expander-contents">
                                    <div class="body">
                                        <div class="main">
                                            <div class="info">
                                                <div class="user-info">
                                                    <div class="user-name">
                                                        <router-link class="name" to="/">
                                                            {{ reply.nickname }}
                                                        </router-link>
                                                    </div>
                                                    <div class="user-level">
                                                        <img class="icon"
                                                            :src="`/src/assets/videoMain/centerMain/commentMain/ic_user level_${reply.level}.svg`"
                                                            alt="">
                                                    </div>
                                                </div>
                                                <router-link class="avatar" to="/">
                                                    <el-avatar :size="24" :src="reply.avatar"
                                                        @error="errorHandler"></el-avatar>
                                                </router-link>
                                            </div>
                                            <div class="text">
                                                <p class="contents">
                                                    <span v-html="reply.content"></span>
                                                </p>
                                            </div>
                                        </div>
                                        <div class="footer">
                                            <div class="wrap">
                                                <div class="pubdate">{{ reply.createTime }}</div>
                                                <div class="item">
                                                    <button @click="replyLike(reply.replyId, 1)" class="btn">
                                                        <!-- 显示未点赞图标 -->
                                                        <img v-if="!hasLiked(reply.likeIds)" class="icon"
                                                            src="../assets/videoMain/centerMain/commentMain/like.svg"
                                                            alt="">

                                                        <!-- 显示已点赞图标 -->
                                                        <img v-else class="icon"
                                                            src="../assets/videoMain/centerMain/commentMain/likeed.svg"
                                                            alt="">
                                                        <span class="count">{{ reply.likeCount }}</span>
                                                    </button>
                                                </div>
                                                <div class="item">
                                                    <button @click="replyLike(reply.replyId, 2)" class="btn">
                                                        <!-- 显示未点赞图标 -->
                                                        <img v-if="!hasLiked(reply.dislikeIds)" class="icon"
                                                            src="../assets/videoMain/centerMain/commentMain/dislike.svg"
                                                            alt="">

                                                        <!-- 显示已点赞图标 -->
                                                        <img v-else class="icon"
                                                            src="../assets/videoMain/centerMain/commentMain/dislikeed.svg"
                                                            alt="">
                                                        <span class="count">{{ reply.dislikeCount }}</span>
                                                    </button>
                                                </div>
                                                <!-- <div class="item">
                                                    <button class="btn"
                                                        @click="replyToReply(item.commentId, reply.replyId, reply.nickname)">回复</button>
                                                </div> -->
                                                <div class="more">
                                                    <!-- 待实现 -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="item.replies && item.replies.length > 2" class="expander-footer"
                            @click="toggleExpand">
                            <div class="view-more">
                                <span class="view-text">{{ isExpanded ? '点击收起' : `查看 ${item.replies.length - 2}
                                    条回复，点击查看` }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="reply-end">没有更多评论</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, Ref, reactive, onMounted, computed, defineProps, defineEmits, nextTick, onBeforeUnmount } from 'vue'
import { emojiConfig } from '../utils/emoji';
import { $sendComment, $sendReply, $commentLike, $replyLike } from '../api/comment.ts'
import { ElMessage, ElLoading, ElMention } from 'element-plus'
import useUser from '../store/user.ts'; // 引入 Pinia store

onMounted(() => {

    initEmojiList();
})

// 引入 Pinia store
const userStore = useUser()
// 判断头像是否加载成功，未加载时使用默认头像
const userAvatar = computed(() => userStore.avatarUrl);

// 头像加载失败时的处理
const errorHandler = () => {
    //userStore.avatarUrl = '/src/assets/navBar/avatar/error.png'; // 设置默认头像
};

const sortCommentAction = ref('New York')

const options = ref([
    {
        label: 'Fuphoenixes',
        value: 'Fuphoenixes',
    },
    {
        label: 'kooriookami',
        value: 'kooriookami',
    },
    {
        label: 'Jeremy',
        value: 'Jeremy',
    },
    {
        label: 'btea',
        value: 'btea',
    },
])

// 定义 emoji 列表项类型
interface EmojiListItem {
    title: string;
    link: string;
}
// 使用 ref 创建响应式变量
const emojiList = ref<EmojiListItem[]>([]);
// 初始化 emoji 列表
const initEmojiList = (): void => {
    for (const key in emojiConfig) {
        emojiList.value.push({
            title: key,
            link: emojiConfig[key]
        });
    }
};

// 是否展开所有回复
const isExpanded = ref(false);

// 切换展开/收起状态
const toggleExpand = () => {
    isExpanded.value = !isExpanded.value;
};

// 评论输入框
const inputValue = ref('')
// 评论输入框引用
const textareaRef = ref();
// 选择表情包
const emojiClick = (emojiTitle: string) => {
    // 获取光标位置
    const textarea = textareaRef.value.$el.querySelector('textarea');
    if (!textarea) return;
    // 获取光标开始位置
    const start = textarea.selectionStart;
    // 获取光标结束位置
    const end = textarea.selectionEnd;

    // 插入表情包
    const newValue = inputValue.value.slice(0, start) + emojiTitle + inputValue.value.slice(end);
    // 更新输入框的值
    inputValue.value = newValue;

    // 更新光标位置
    textarea.focus();
    // 设置光标位置
    textarea.setSelectionRange(start + emojiTitle.length, start + emojiTitle.length);
}


// 评论输入框引用
const commentTextarea = ref();
// 处理表情点击事件
const commentEmojiClick = (emojiTitle: string, index: number) => {
    nextTick(() => {
        // 获取 el-mention 的 DOM 实例
        const textarea = commentTextarea.value?.$el.querySelector('textarea');
        if (!textarea) {
            return;
        }

        // 获取光标位置
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;

        // 插入表情
        const newValue = commentValue.value.slice(0, start) + emojiTitle + commentValue.value.slice(end);
        commentValue.value = newValue;

        // 更新光标位置
        textarea.focus();
        // 更新光标位置
        textarea.setSelectionRange(start + emojiTitle.length, start + emojiTitle.length);
    });
};
const mention = (choose: number) => {
    if (choose === 1) {
        inputValue.value = '@'
    } else {
        commentValue.value = '@'
    }
}

// 定义评论和回复的数据类型
interface Reply {
    replyId: string;
    content: string;
    createTime: string;
    userId: string;
    nickname: string;
    avatar: string;
    likes: number;
    dislikes: number;
}

interface Comment {
    commentId: string;
    content: string;
    createTime: string;
    userId: string;
    nickname: string;
    avatar: string;
    likes: number;
    dislikes: number;
    replies: Reply[];
}

// 接收父组件传递的数据
const props = defineProps({
    comments: {
        type: Array,
        required: true,
    },
    videoId: {
        type: String,
        required: true,
    },
});


// 当前正在回复的目标用户名
const replyTarget = ref<string>('')
const commentValue = ref<string>('')
const isReplying = ref(false);  // 控制是否显示回复框
const headerWidth = ref(0); // 存储 header 宽度
const commentIdValue = ref<string>('')
// 控制点击“回复”按钮后显示回复框
const replyToComment = (commentId: string, nickname: string) => {
    replyTarget.value = nickname; // 设置目标昵称
    isReplying.value = !isReplying.value; // 切换回复框的显示状态
    commentValue.value = ''
    commentIdValue.value = commentId

    // 使用 nextTick 确保 DOM 渲染后聚焦输入框
    nextTick(() => {
        const textarea = commentTextarea.value?.$el.querySelector('textarea');
        if (textarea) {
            textarea.focus();
        }
    });
};

const emit = defineEmits<{
    (e: 'trigger-method', videoId: string): Promise<void>;  // 定义带有 videoId 的异步事件
}>();

// 发布评论
const postComment = async (choose: number) => {
    if (choose === 1) {
        if (!inputValue.value) {
            ElMessage.warning('评论内容不能为空');
            return;  // 防止空评论提交
        }
    } else {
        if (!commentValue.value) {
            ElMessage.warning('回复内容不能为空');
            return;  // 防止空评论提交
        }
    }
    let result = ''
    if (choose === 1) {
        result = inputValue.value;
    } else {
        result = commentValue.value
    }

    // 处理换行符：将换行符（\n）替换为 <br/> 标签
    result = result.replace(/\n/g, function () {
        return "<br/>";  // 替换换行符为 <br/>
    });

    // 处理表情符号：将 [表情名称] 替换为对应的 <img> 标签
    result = result.replace(/\[.*?]/g, (str) => {
        // 在 emojiList 中找到与 str 匹配的表情项
        const emojiItem = emojiList.value.find(item => item.title === str);

        // 如果找到匹配的表情项，则用 <img> 标签替换
        if (emojiItem) {
            return `<img class="emoji-pic" src="${emojiItem.link}" alt="${str}" />`;
        }

        // 如果没有找到匹配的表情，返回原始字符串
        return str;
    });

    // 将结果作为评论发送（可以通过事件或直接调用接口提交）
    // 假设你有一个函数将评论提交到后端或父组件
    console.log("处理后的评论：", result);
    if (choose === 2) {
        // 构建评论模型
        const commentModel = {
            content: result,
            userId: userStore.userInfo.id,
            commentId: commentIdValue.value
        };
        await $sendReply(commentModel)
            .then((res) => {
                if (res.success) {
                    ElMessage.success('回复成功');
                    // 触发父组件的事件
                    emit('trigger-method', props.videoId);
                } else {
                    ElMessage.error(res.message || '发送失败');
                }
            })
            .catch((error) => {
                console.error('发送失败:', error);
                ElMessage.error(error.message);
            })
            .finally(() => {
                // 清空评论框内容
                commentValue.value = '';
            });
    } else {
        // 构建评论模型
        const commentModel = {
            content: result,
            userId: userStore.userInfo.id,
            videoId: props.videoId
        };
        await $sendComment(commentModel)
            .then((res) => {
                if (res.success) {
                    ElMessage.success('评论成功');
                    // 触发父组件的事件
                    emit('trigger-method', props.videoId);
                } else {
                    ElMessage.error(res.message || '发送失败');
                }
            })
            .catch((error) => {
                console.error('发送失败:', error);
                ElMessage.error(error.message);
            })
            .finally(() => {
                // 清空评论框内容
                inputValue.value = '';
            });
    }
}

// 判断当前用户是否已经点赞
const hasLiked = (likeIds: string): boolean => {
    // 确保 likeIds 是有效的字符串，如果为空则返回 false
    const ids = likeIds || "";  // 如果 likeIds 为 null 或 undefined，使用空字符串
    return ids.split(',').includes(userStore.userInfo.id);
};

// 评论点赞
const commentLike = (commentId: string, choose: number) => {
    if (!userStore.isLoggedIn) {
        ElMessage.error('请先登录');
        return;
    }
    // 构建评论模型
    const commentModel = {
        commentId: commentId,
        userId: userStore.userInfo.id,
        choose: choose
    };
    // 点赞
    $commentLike(commentModel)
        .then((res) => {
            if (res.success) {
                //ElMessage.success('点赞成功');
                // 触发父组件的事件
                emit('trigger-method', props.videoId);
            } else {
                ElMessage.error(res.message);
            }
        })
        .catch((error) => {
            console.error('点赞失败:', error);
            ElMessage.error(error.message);
        })
}

// 回复点赞
const replyLike = (replyId: string, choose: number) => {
    console.log('回复点赞', replyId, choose);
    if (!userStore.isLoggedIn) {
        ElMessage.error('请先登录');
        return;
    }
    // 构建评论模型
    const commentModel = {
        replyId: replyId,
        userId: userStore.userInfo.id,
        choose: choose
    };
    // 点赞
    $replyLike(commentModel)
        .then((res) => {
            if (res.success) {
                //ElMessage.success('点赞成功');
                // 触发父组件的事件
                emit('trigger-method', props.videoId);
            } else {
                ElMessage.error(res.message);
            }
        })
        .catch((error) => {
            console.error('点赞失败:', error);
            ElMessage.error(error.message);
        })
}
</script>

<style lang="scss" scoped>
::v-deep .emoji-pic {
    width: 1.4em;
    height: 1.4em;
    vertical-align: text-bottom;
}

.reply-container {
    position: fixed;
    /* 固定位置在屏幕底部 */
    bottom: 10px;
    /* 距离底部 20px */
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.3s ease-out;

    .comment-box {
        padding: 0px 0px 5px 0px;
        display: flex;

        .user-avatar {
            flex-shrink: 0;
            width: 80px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .comment-area {
            position: relative;
            width: calc(100% - 80px);

            .area {
                width: 100%;
            }

            .footer {
                position: relative;
                margin-top: 10px;
                display: flex;
                align-items: center;

                .item {
                    outline: none;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    width: 32px;
                    height: 26px;
                    border: 1px solid var(--Ga1);
                    background-color: var(--bg1);
                    border-radius: 4px;
                    color: var(--text2);
                    cursor: pointer;
                    margin-right: 6px;

                    .icon {
                        width: 16;
                        height: 16;
                    }
                }

                .pub {
                    height: 32px;
                    width: 70px;
                    margin-left: auto;

                    .btn {
                        cursor: pointer;
                        border-radius: 4px;
                        outline: none;
                        border: none;
                        width: 100%;
                        height: 100%;
                        font-size: 16px;
                        color: var(--text_white);
                        background-color: rgba(var(--brand_blue_rgb), 0.5);

                        &:hover {
                            background-color: var(--brand_blue);
                        }
                    }
                }
            }
        }
    }
}

// 表情包pop
.emoji-body {
    height: var(--bili-emoji-picker-body-height);

    .emoji-content {
        height: 100%;
        padding: 0 11px;
        background-color: var(--bg1);
        overflow: auto;

        &::-webkit-scrollbar {
            width: 4px;
        }

        &::-webkit-scrollbar-track {
            background: #e8e8e8;
        }

        &::-webkit-scrollbar-thumb {
            background: #b4b5b6;
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: #929090;
        }

        .emoji-img {
            box-sizing: content-box;
            padding: 4px;
            height: 24px;
            display: inline-block;
            border-radius: 4px;
            cursor: pointer;

            &:hover {
                background-color: var(--Ga2_u);
            }

            .img {
                width: 24px;
                aspect-ratio: auto 24 / 24;
                height: 24px;
                overflow-clip-margin: content-box;
                overflow: clip;
            }
        }
    }
}

// 评论
.video-comment {

    .header {
        display: block;
        unicode-bidi: isolate;
        width: 100%;

        .notice {
            margin-bottom: 10px;

            .bar {
                display: flex;
                align-items: center;
                position: relative;
                height: 40px;
                padding: 0px 10px;
                font-size: 12px;
                color: var(--Ye5_u);
                cursor: pointer;

                .bg {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 100%;
                    height: 100%;
                    border-radius: 2px;
                    background-color: var(--Ye5_u);
                    opacity: 0.2;
                    pointer-events: none;
                }

                .icon {
                    display: inline-flex;
                    align-items: center;

                    .img {
                        width: 14;
                        height: 14;
                    }
                }

                .title {
                    position: relative;
                    z-index: 1;
                    margin-right: auto;
                    flex: 1 1 0%;
                    padding: 0px 5px;
                    vertical-align: top;
                    overflow-wrap: break-word;
                    word-break: break-all;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .close {
                    position: relative;
                    z-index: 1;
                    display: flex;

                    .img {
                        width: 16;
                        height: 16;
                    }
                }
            }
        }

        .navbar {
            display: flex;
            align-items: center;
            height: 28px;
            margin-bottom: 22px;

            .title {
                display: var(--bili-comments-title-display, flex);
                align-items: center;

                .text {
                    margin: 0px;
                    color: var(--text1);
                    font-weight: 500;
                    font-size: var(--bili-comments-font-size-title, 20px);
                }

                .count {
                    margin: 0px 30px 0px 6px;
                    font-size: var(--bili-comments-font-size-count, 13px);
                    font-weight: 400;
                    color: var(--text3);
                }
            }

            .sort-actions {
                display: block;
                unicode-bidi: isolate;

                .radio {
                    :deep(.el-radio-button__inner) {
                        border: none;
                        box-shadow: none;
                        font-size: 16px;
                        color: #9499A0;

                        &:hover {
                            color: var(--brand_blue);
                        }
                    }
                }
            }
        }

        .comment-box {
            flex-shrink: 0;
            transition: height 0.2s;
            height: var(--bili-comments-commentbox-height, auto);
            display: flex;

            .user-avatar {
                flex-shrink: 0;
                width: 80px;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .comment-area {
                position: relative;
                width: calc(100% - 80px);

                .area {
                    width: 100%;
                }

                .footer {
                    position: relative;
                    margin-top: 10px;
                    display: flex;
                    align-items: center;

                    .item {
                        outline: none;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: relative;
                        width: 32px;
                        height: 26px;
                        border: 1px solid var(--Ga1);
                        background-color: var(--bg1);
                        border-radius: 4px;
                        color: var(--text2);
                        cursor: pointer;
                        margin-right: 6px;

                        .icon {
                            width: 16;
                            height: 16;
                        }
                    }

                    .pub {
                        height: 32px;
                        width: 70px;
                        margin-left: auto;

                        .btn {
                            cursor: pointer;
                            border-radius: 4px;
                            outline: none;
                            border: none;
                            width: 100%;
                            height: 100%;
                            font-size: 16px;
                            color: var(--text_white);
                            background-color: rgba(var(--brand_blue_rgb), 0.5);

                            &:hover {
                                background-color: var(--brand_blue);
                            }
                        }
                    }
                }
            }
        }
    }

    .content {
        padding-top: 14px;
        position: relative;

        .content-item {

            .wrap {
                display: block;
                unicode-bidi: isolate;

                .body {
                    position: relative;
                    padding-left: 80px;
                    padding-top: 22px;
                    --bili-comment-hover-more-display: none;

                    .user-avatar {
                        position: absolute;
                        left: 20px;
                        top: 22px;
                        width: 48px;
                        height: 48px;
                        transform-origin: left top;
                        transform: var(--bili-comments-avatar-size);
                    }

                    .main {
                        width: 100%;

                        .header {
                            margin-bottom: 4px;

                            .wrap {
                                --bili-comment-user-info-name-color: var(--text2);

                                .info {
                                    display: inline-flex;
                                    align-items: center;

                                    .name {
                                        color: var(--bili-comment-user-info-name-color);
                                        font-size: var(--bili-comments-font-size-name, 13px);
                                        font-weight: 500;

                                        .text {
                                            color: #FB7299;
                                        }
                                    }

                                    .level {
                                        margin-left: 5px;
                                        width: 24px;
                                        height: 24px;

                                        .icon {
                                            width: 24px;
                                            aspect-ratio: auto 30 / 30;
                                            height: 24px;
                                            overflow-clip-margin: content-box;
                                            overflow: clip;
                                        }
                                    }
                                }
                            }
                        }

                        .content {
                            font-size: var(--bili-comments-font-size-content);
                            line-height: var(--bili-comments-line-height-content);
                            color: var(--text1);

                            .wrap {
                                --bili-rich-text-font-size: var(--bili-comments-font-size-content);
                                --bili-rich-text-line-height: var(--bili-comments-line-height-content);
                                --bili-rich-text-link-color: var(--Lb6);
                                --bili-rich-text-display: inline;
                                --bili-rich-text-white-space: pre-line;
                                --bili-rich-text-word-break: break-word;
                                --bili-rich-text-icon-vertical-align: sub;

                                .contents {
                                    margin-block-start: 0;
                                    margin-block-end: 0;
                                    margin-inline-start: 0;
                                    margin-inline-end: 0;
                                    display: var(--bili-rich-text-display);
                                    white-space: var(--bili-rich-text-white-space);
                                    word-break: var(--bili-rich-text-word-break);
                                    -webkit-font-smoothing: antialiased;
                                }
                            }
                        }

                        .footer {
                            display: block;
                            unicode-bidi: isolate;

                            .wrap {
                                width: 100%;
                                display: flex;
                                align-items: center;
                                position: relative;
                                margin-top: 3px;
                                font-size: 13px;
                                color: var(--text3);
                                --bili-comment-action-buttons-more-display: var(--bili-comment-hover-more-display);

                                .pubdate {
                                    display: block;
                                    unicode-bidi: isolate;
                                }

                                .item {
                                    display: block;
                                    unicode-bidi: isolate;
                                    margin-left: 20px;

                                    .btn {
                                        padding: 0px;
                                        outline: none;
                                        border: none;
                                        background: transparent;
                                        height: 24px;
                                        font-size: 13px;
                                        color: var(--text3);
                                        display: inline-flex;
                                        align-items: center;
                                        cursor: pointer;

                                        .icon {
                                            vertical-align: middle;
                                            width: 16;
                                            height: 16;
                                        }

                                        .count {
                                            margin-left: 5px;
                                            display: inline-block;
                                        }
                                    }
                                }

                                .more {
                                    margin-left: auto;
                                    margin-right: 20px;
                                    width: 24px;
                                    height: 24px;
                                    position: relative;
                                }
                            }
                        }
                    }
                }
            }

            .expanded {
                max-height: none !important;
                transition: max-height 0.5s ease;
                /* 过渡效果 */
            }

            .replies {
                display: block;
                unicode-bidi: isolate;

                .wrap {
                    -webkit-font-smoothing: antialiased;
                    max-height: 200px;
                    /* 你可以调整这个值，限制宽度 */
                    overflow: hidden;
                    text-overflow: ellipsis;
                    transition: max-height 0.5s ease;
                    /* 过渡效果 */

                    .expander {
                        padding-left: 80px;
                        margin-top: 2px;

                        .expander-contents {
                            position: relative;

                            .body {
                                position: relative;
                                padding: 8px 0px 8px 34px;
                                border-radius: 4px;
                                --bili-comment-hover-more-display: none;

                                .main {
                                    width: 100%;
                                    display: block;
                                    overflow: hidden;

                                    .info {
                                        --bili-comment-user-info-name-color: var(--text2);

                                        .user-info {
                                            display: inline-flex;
                                            align-items: center;

                                            .user-name {
                                                color: var(--bili-comment-user-info-name-color);
                                                font-size: var(--bili-comments-font-size-name, 13px);
                                                font-weight: 500;
                                                display: block;
                                                unicode-bidi: isolate;

                                                .name {
                                                    color: inherit;
                                                    cursor: pointer;
                                                }
                                            }

                                            .user-level {
                                                margin-left: 5px;
                                                width: 24px;
                                                height: 24px;

                                                .icon {
                                                    width: 24px;
                                                    aspect-ratio: auto 30 / 30;
                                                    height: 24px;
                                                    overflow-clip-margin: content-box;
                                                    overflow: clip;
                                                }
                                            }
                                        }

                                        .avatar {
                                            position: absolute;
                                            left: 0px;
                                            width: 24px;
                                            height: 24px;
                                        }
                                    }

                                    .text {
                                        --bili-rich-text-line-height: 24px;
                                        --bili-rich-text-link-color: var(--Lb6);
                                        --bili-rich-text-display: inline;
                                        --bili-rich-text-white-space: pre-line;
                                        --bili-rich-text-word-break: break-word;
                                        --bili-rich-text-icon-vertical-align: sub;
                                        margin: 6px 0;

                                        .contents {
                                            margin-block-start: 0;
                                            margin-block-end: 0;
                                            margin-inline-start: 0;
                                            margin-inline-end: 0;
                                            display: var(--bili-rich-text-display);
                                            white-space: var(--bili-rich-text-white-space);
                                            word-break: var(--bili-rich-text-word-break);
                                            -webkit-font-smoothing: antialiased;
                                        }
                                    }
                                }

                                .footer {
                                    display: block;
                                    unicode-bidi: isolate;

                                    .wrap {
                                        width: 100%;
                                        display: flex;
                                        align-items: center;
                                        position: relative;
                                        margin-top: 3px;
                                        font-size: 13px;
                                        color: var(--text3);
                                        --bili-comment-action-buttons-more-display: var(--bili-comment-hover-more-display);

                                        .pubdate {
                                            display: block;
                                            unicode-bidi: isolate;
                                        }

                                        .item {
                                            display: block;
                                            unicode-bidi: isolate;
                                            margin-left: 20px;

                                            .btn {
                                                padding: 0px;
                                                outline: none;
                                                border: none;
                                                background: transparent;
                                                height: 24px;
                                                font-size: 13px;
                                                color: var(--text3);
                                                display: inline-flex;
                                                align-items: center;
                                                cursor: pointer;

                                                .icon {
                                                    vertical-align: middle;
                                                    width: 16;
                                                    height: 16;
                                                }

                                                .count {
                                                    margin-left: 5px;
                                                    display: inline-block;
                                                }
                                            }
                                        }

                                        .more {
                                            margin-left: auto;
                                            margin-right: 20px;
                                            width: 24px;
                                            height: 24px;
                                            position: relative;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .expander-footer {
                    margin-top: 2px;
                    padding-left: 80px;

                    .view-more {
                        font-size: 13px;
                        color: var(--text3);

                        .view-text {
                            cursor: pointer;

                            &:hover {
                                color: var(--brand_blue);
                            }
                        }
                    }
                }
            }

            .line {
                padding-bottom: 14px;
                margin-left: 80px;
                border-bottom: 1px solid var(--graph_bg_thick);
            }
        }

        .reply-end {
            margin-top: 20px;
            font-size: 13px;
            color: var(--text3);
            text-align: center;
            font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
            font-weight: 400;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }
    }
}
</style>